<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/26
  File: 01.5refs设置焦点.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>01.5refs设置焦点</title>
  <style></style>
</head>

<body>

  <div id="root"></div>

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <!--<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>-->
  <script src="../js/react@16.development.js" crossorigin></script>
  <script src="../js/react-dom@16.development.js" crossorigin></script>
  <script src="../js/babel@6.min.js"></script>
  <!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script> -->

  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">
    const { Component } = React
    class CustomTextInput extends Component {
      constructor(props) {
        super(props);
        this.state = {};
        // 创建一个 textInput DOM 元素的 ref
        this.textInput = React.createRef()
      }
      componentDidMount() {
        this.focus()
      }
      // 我们可以在需要时于其他地方把焦点设置在这个组件上：
      focus() {
        // 使用原始的 DOM API 显式地聚焦在 text input 上
        // 注意：我们通过访问“current” 来获得 DOM 结点
        this.textInput.current.focus();
      }
      render() {
        // 使用 `ref` 回调函数以在实例的个变量中存储文本输入 DOM 元素
        // （比如，this.textInput）
        return (
          <input
            type="text"
            ref={this.textInput}
          />
        );
      }
    }

    ReactDOM.render(
      <CustomTextInput />,
      document.getElementById('root')
    );

  </script>
</body>

</html>